<template>
  <Editor ref="editorRef" v-bind="$attrs" v-model="content" :api-key="apiKey" :init="initOptions"/>
</template>

<script lang="ts">
export default {
  name: "Tinymce"
}
</script>

<script lang="ts" setup>
import Editor from "@tinymce/tinymce-vue";
import {computed, onMounted, reactive, ref} from "vue";
import {uploadFile} from "/@/api/console/upload";
const props = withDefaults(defineProps<{
  value: any,
  uploadTopic: string
}>(),{
  uploadTopic: 'news'
})
const emit = defineEmits(['update:value']);

const editorRef = ref<any>(null);

// https://www.tiny.cloud/官方注册账号免费申请
const apiKey = "94wvcawo35cqg62ar6gu56vnjm6r0y24qoj5gal6vcd9edgy"
const initOptions = reactive({
  language: "zh_CN", //语言类型
  placeholder: "正文", //textarea中的提示信息
  menubar: false,// 菜单栏显示隐藏
  min_width: 320,// 宽
  min_height: 220,// 高
  height: 800, //注：引入autoresize插件时，此属性失效
  resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  branding: false, //tiny技术支持信息是否显示
  statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
                     // elementpath: false, //元素路径是否显示
  /**
   * plugins插件
   * 'codesample',// 代码示范
   * "fullscreen",// 全屏
   * "preview",// 预览
   * "lists, advlist", //依赖lists插件
   * "table", // 表格
   * "searchreplace",// 查找替换
   * "hr",// 水平线
   * "media",// 媒体
   * "image",// 图片
   */
  plugins: 'image,codesample,fullscreen,preview,lists,advlist,table,searchreplace,hr,media',
  toolbar: [// 数组写法
    'undo redo | formatselect | bold italic underline strikethrough | fontsizeselect | hr bullist numlist outdent indent blockquote subscript superscript | alignleft | aligncenter | alignright | image media | selectall codesample fullscreen preview searchreplace',
    'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
  ],
  images_upload_handler: function (blobInfo:any, succFun:any ,failFun:any) {
    let file = blobInfo.blob()// 转化file对象
    uploadFile(file,props.uploadTopic).then(res => {
      succFun(res.url)
    }).catch(e => {
      failFun('上传失败');
    })
  }
})


const content = computed({
  get:()=> props.value,
  set: (val) =>{
    console.log('xxxxxxx',val)
    emit('update:value',val)
  }
})

</script>

<style scoped>

</style>
